<template>
	<view class="agreen_box flex_s">
		<view class="check_box flex_c" @click="agreenHandel">
			<u-icon name="checkbox-mark" color="#2A82E4" size="10" v-if="newAgreen"></u-icon>
		</view>
		<view class="text_box">
			我已阅读并同意<text style="color: #2A82E4;" @click="$u.route(`/pages/userAgreement/index?val=${title}`)">《{{title}}》</text>
		</view>
	</view>
</template>

<script>

	export default {
		props: {
			title: {
				type: String,
				default: '黄金换料说明'
			},
			agreenBool:{
				type: Boolean,
				default: false
			}
		},
		name: "agreenment",
		watch:{
			agreenBool(val){
				this.newAgreen=val
			}
		},
		data() {
			return {
				newAgreen:false
			};
		},

		methods:{
			agreenHandel(){
				this.newAgreen=!this.agreenBool
				this.$emit('checkAgreen',this.newAgreen)

			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.agreen_box {
		margin-bottom: 30rpx;

		.check_box {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 2rpx solid #808080;
			background: #fff;
		}

		.text_box {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: #363636;
		}
	}
</style>